<template>
  <div class="form2">
    <ep-advance-card title="高级表单" theme="theme-1" class="c1"> 当一次性提交大量数据时，可使用高级表单 </ep-advance-card>
    <ep-form ref="form" class="form-container" :form="formData" :rules="rules" name-width="100px" size="normal" name-position="top">
      <ep-advance-card class="c1">
        <div class="title">出差信息</div>
        <ep-divider></ep-divider>
        <ep-row :gutter="20">
          <ep-col :col="12">
            <ep-form-item label="出差事由：" attr="property1" required>
              <ep-input v-model="formData.property1" name="property1"></ep-input>
            </ep-form-item>
          </ep-col>
          <ep-col :col="12">
            <ep-form-item label="合同编号：" attr="property2" required>
              <ep-input v-model="formData.property2" name="property2"></ep-input>
            </ep-form-item>
          </ep-col>
        </ep-row>
        <ep-row :gutter="20">
          <ep-col :col="8">
            <ep-form-item label="出差时间：" attr="property3" required>
              <ep-date-range v-model="formData.property3"></ep-date-range>
            </ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="审批人：" attr="property4">
              <ep-select placeholder="请选择" v-model="formData.property4" filterable>
                <ep-select-item v-for="item in selectArr2" :key="item.value" :index="item.value" :label="item.name"></ep-select-item>
              </ep-select>
            </ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="紧急程度" attr="property6" required>
              <ep-radio class="radio" v-model="formData.property6" label="1" name="property6">紧急</ep-radio>
              <ep-radio class="radio" v-model="formData.property6" label="2" name="property6">急</ep-radio>
              <ep-radio class="radio" v-model="formData.property6" label="3" name="property6">一般</ep-radio>
            </ep-form-item>
          </ep-col>
        </ep-row>
      </ep-advance-card>
      <ep-advance-card class="c1">
        <div class="title">行程信息</div>
        <ep-divider></ep-divider>
        <ep-row :gutter="20">
          <ep-col :col="8">
            <ep-form-item label="出发城市：" attr="property7" required>
              <ep-cascader v-model="formData.property7" :labels="list"></ep-cascader>
            </ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="出发时间：" attr="property8" required>
              <ep-date v-model="formData.property8"></ep-date>
            </ep-form-item>
          </ep-col>
          <ep-col :col="8">
            <ep-form-item label="返程时间：" attr="property9" required>
              <ep-date v-model="formData.property9"></ep-date>
            </ep-form-item>
          </ep-col>
        </ep-row>
        <ep-row :gutter="20">
          <ep-col :col="8">
            <ep-form-item label="交通类型：" attr="property10" required>
              <ep-select placeholder="请选择" v-model="formData.property10" filterable>
                <ep-select-item v-for="item in selectArr2" :key="item.value" :index="item.value" :label="item.name"></ep-select-item>
              </ep-select>
            </ep-form-item>
          </ep-col>
        </ep-row>
      </ep-advance-card>
      <ep-advance-card class="c1">
        <div class="title">同行人员</div>
        <ep-divider></ep-divider>
        <ep-table ref="table" :data="list2" size="normal">
          <ep-table-item column="property11" title="姓名"></ep-table-item>
          <ep-table-item column="property12" title="工号"></ep-table-item>
          <ep-table-item column="property13" title="所属部门"></ep-table-item>
          <ep-table-item column="action" title="操作">
            <template slot-scope="props">
              <ep-button type="primary" @click="edit(props.index)">编辑</ep-button>
              <ep-button type="danger" @click="remove(props.index)">删除</ep-button>
            </template>
          </ep-table-item>
        </ep-table>
        <div class="add-btn" @click="add"><i class="ion-3-md-add"></i>新增成员</div>
      </ep-advance-card>
      <div class="bottom-btn-layout">
        <ep-button type="primary" size="normal" @click="submit">提交</ep-button>
        <ep-button type="warning" size="normal" @click="resetForm">重置</ep-button>
      </div>
    </ep-form>
  </div>
</template>

<script>
export default {
  name: 'form2',
  data() {
    return {
      formData: {
        property1: '',
        property2: '',
        property3: '',
        property4: '',
        property5: '',
        property6: '1',
        property7: [],
        property8: '',
        property9: '',
        property10: ''
      },
      selectArr1: [
        { value: '1', name: '会议室1' },
        { value: '2', name: '会议室2' },
        { value: '3', name: '会议室3' },
        { value: '4', name: '会议室4' },
        { value: '5', name: '会议室5' }
      ],
      selectArr2: [
        { value: '1', name: '飞机' },
        { value: '2', name: '火车' },
        { value: '3', name: '轮船' }
      ],
      list: [
        {
          label: '上海',
          value: 'shanghai',
          children: [
            { label: '黄浦区', value: 'huangpu' },
            { label: '浦东新区', value: 'pudong' }
          ]
        },
        { label: '北京', value: 'beijing', children: [{ label: '朝阳区', value: '朝阳' }] }
      ],
      rules: {
        property1: { required: true, message: '请输入', trigger: 'change' },
        property2: { required: true, message: '请输入', trigger: 'change' },
        property3: { required: true, message: '请选择', trigger: 'change' },
        property4: { required: true, message: '请选择', trigger: 'change' },
        property5: { required: true, message: '请选择', trigger: 'change' },
        property6: { required: true, message: '请选择', trigger: 'change' },
        property7: { required: true, message: '请选择', trigger: 'change' },
        property8: { required: true, message: '请选择', trigger: 'change' },
        property9: { required: true, message: '请选择', trigger: 'change' },
        property10: { required: true, message: '请选择', trigger: 'change' }
      },
      list2: [
        { property11: '小鱼', property12: '1001', property13: '技术部' },
        { property11: '小鱼', property12: '1002', property13: '技术部' },
        { property11: '小鱼', property12: '1003', property13: '技术部' }
      ]
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$pop({
            type: 'success',
            message: '验证通过！'
          })
        }
      })
    },
    resetForm() {
      this.$refs.form.reset()
    },
    remove(index) {
      this.list2.splice(index, 1)
    },
    add() {
      this.$refs.table.addRow()
    },
    cancelEdit() {
      this.$refs.table.cancelEdit()
    }
  }
}
</script>
<style lang="less" scoped>
.form2 {
  .c1 {
    margin-bottom: 15px;
    .ep-row {
      margin-bottom: 0;
    }
  }
  .bottom-btn-layout {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 56px;
    line-height: 56px;
    border-top: 1px solid #e8eaec;
    -webkit-box-shadow: 0 -1px 2px rgb(0 0 0 / 3%);
    box-shadow: 0 -1px 2px rgb(0 0 0 / 3%);
    text-align: right;
    .ep-button {
      margin-right: 15px;
    }
  }
  .ep-divider--horizontal {
    margin: 18px 0;
  }
  .ep-form--item {
    margin-bottom: 15px;
  }
  .add-btn {
    height: 32px;
    line-height: 32px;
    margin: 20px auto;
    text-align: center;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    .ion-3-md-add {
      margin-right: 3px;
      margin-top: -2px;
      vertical-align: middle;
    }
  }
}
</style>
